import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';


export default class LifeCycle extends Component{
    constructor(props){
        super(props)
        this.state={
            count:0
        }
    }
    componentWillMount(){
        console.log("--1-----componentWillMount-------");    
    }
    render(){
        console.log("--2-----render-------");   
        return (
            <View>
               <Text  style={styles.textStyle}> 
                    生命周期钩子函数测试使用command+d打开调试工具</Text>
               <Text        
                        style={styles.btnStyle}
                        onPress={()=>{
                                this.setState({
                                    count:this.state.count+1
                                })
                }}>
                        点击触发updating
                </Text>
                <Text>点击了:{this.state.count} 次</Text>
            </View>
        )
    }
    componentDidMount(){
        console.log("--3-----componentDidMount-------");  
    }

    componentWillReceiveProps(nextProps){
        console.log("------componentWillReceiveProps-------");
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("------shouldComponentUpdate-------");
        return true
    }
    componentWillUpdate(nextProps,nextState){
        console.log("------componentWillUpdate-------");
    }
    componentDidUpdate(prevProps,prevState){
        console.log("------componentDidUpdate-------");
    }
    componentWillUnmount(){
        console.log("------componentWillUnmount-------"); 
    }
}


const styles = StyleSheet.create({
    textStyle:{
        fontSize:15,
        marginTop:50,
        textAlign:'center'
    },
    btnStyle:{
        backgroundColor:'#f2e514',
        textAlign:'center',
        lineHeight:30
    }
})